<template>
    <div class="main">

        <!-- 二级路由 -->
        <div>
            <router-view></router-view>
        </div>

        <van-tabbar class="tab-nav" v-model="activeName" inactive-color="#646566" active-color="#0C34BA" route>
            <van-tabbar-item v-for="(item, index) in tabbarData" :key="index" :name="item.name" replace :to="item.path"
                :dot="item.dot">
                <span>{{item.title}}</span>
                <template #icon>
                    <span :class="item.icon" size="24px"></span>
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    export default {
        name: 'Main',
        data() {
            return {

                //激活标签的名称
                activeName: 'Home',

                tabbarData: [{
                        title: '首页',
                        icon: 'bookicon-books',

                        //标签名称、路由名称
                        name: 'Home',
                        path: '/home',
                    },
                    {
                        title: '书城',
                        icon: 'bookicon-shuben-',
                        name: 'Bookcity',
                        path: '/bookcity'
                    },
                    {
                        title: '分享',
                        icon: 'bookicon-iconfontzhizuobiaozhun20',
                        name: 'Share',
                        path: '/share'
                    },
                    {
                        title: '我的',
                        icon: 'van-icon van-icon-contact',
                        name: 'Mine',
                        path: '/mine'
                    }
                ]
            };
        },
        created() {
            // 提前缓存，更新store的部分数据
            // this.$store.dispatch('updatedDiscovery')
            this.$store.dispatch('getlocaltionbooks')
            // this.$store.commit('updatedDiscovery');
        },
        methods: {

        }
    }
</script>

<style scoped>
    .main {
        background-color: #f5f5f5;
    }
    .van-tabbar-item--active{
        color: #01acf5 !important;
        font-weight: 550;
    }
</style>